
{% extends 'base.html' %}

{% block content %}
<p>{{ movies|length }} Titles</p>

{% if current_user.is_authenticated %}

<form method="post" class="form-inline">
<!--    Name <input type="text" name="title" autocomplete="off" required>
    Year <input type="text" name="year" autocomplete="off" required>
    <input class="btn btn-success btn-sm" type="submit" name="submit" value="Add">-->

    <div class="form-group">
        <label class="col-form-label mr-2">电影名</label>
        <input class="form-control mr-lg-2" type="text" placeholder="请输入要添加的电影名" name="title" autocomplete="off" required>
    </div>
    <div class="form-group">
        <label class="col-form-label mr-2">上线日期</label>
        <input class="form-control mr-lg-4" type="text" name="year" id="movedatepicker" placeholder="请选择日期" onfocus="this.blur();" >
    </div>
  <div class="form-group">
       <button type="submit" class="btn btn-success" name="submit">添加</button>
  </div>

</form>


{% endif %}
</p>
<script type="text/javascript">
 $("#movedatepicker").datepicker({
        //language: 'zh-CN', //语言
        format: 'yyyy',
        language: "zh-CN",
        autoclose:true,
        startView: 2,
        minViewMode: 2,
        maxViewMode: 2,
        clearBtn: true
    });
</script>


<table  class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Movie</th>
      <th scope="col">Year</th>
      <th scope="col" ><span class="float-right"></span></th>
    </tr>
  </thead>
  <tbody>
    {% for movie in movie %}
    <tr>
      <th scope="row">{{ loop.index + pagination.skip }}</th>
      <td>{{ movie.title }}</td>
      <td>{{ movie.year }}</td>
      <td><span class="float-right">
        {% if current_user.is_authenticated %}
    <a class="btn btn-success btn-sm" href="{{ url_for('edit', movie_id=movie.id) }}">Edit</a>
    <!-- <form class="inline-form" method="post" action="{{ url_for('delete', movie_id=movie.id) }}">
        <input class="btn btn-danger btn-sm" type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure?')">
    </form>-->
           <button type="button" class="btn btn-primary btn-delete btn-sm" data-bs-toggle="modal" data-bs-target="#myModal" data-id="{{ movie.id }}">Delete</button>
            {% endif %}
            <a class="btn btn-warning btn-sm" href="https://www.imdb.com/find?q={{ movie.title }}" target="_blank" title="Find this movie on IMDb">IMDb</a>
        </span> </td>
    </tr>
   {% endfor %}
  </tbody>
</table>
<nav class="pagination justify-content-end"> {{ pagination.info }}</nav>
<nav class="pagination justify-content-end"> {{ pagination.links }}</nav>
<img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}" title="to~to~ro~">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="delmovModal" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">操作提示</h4>
			</div>
			<div class="modal-body">确定要删除该记录吗？</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
				<a class="btn btn-primary btn-xs" id="confirmDelete">确认</a>
			</div>
		</div>
	</div>
</div>

<script>
        $(document).ready(function () {
            $('.btn-delete').click(function () {
                var id = $(this).data('id');
                $('#myModal').modal('show');
                $('#confirmDelete').data('id', id);
            });

            $('#confirmDelete').click(function () {
                var id = $(this).data('id');
                $.ajax({
                    url: '/movie/delete/' + id,
                    type: 'POST',
                    success: function (response) {
                        if (response.status == "success") {
                            location.reload();
                        } else {
                            alert('删除失败！');
                        }
                    },
                    error: function () {
                        alert('发生错误！');
                    }
                });
                $('#myModal').modal('hide');
            });
        });
    </script>
{% endblock %}

